<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>广告推荐管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-row :gutter="10">
        <el-col :span="5">
          <!-- 店铺选择器 -->
          <el-select v-model="shopvalue" clearable placeholder="请选择店铺">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <!-- 商品选择器 -->
          <el-select
            v-model="commodityvalue"
            clearable
            placeholder="请选择商品"
          >
            <el-option
              v-for="item in comoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <!-- 表格栅格布局 -->
      <el-row :gutter="24">
        <el-col :span="7">
          <!-- 表格区域 -->
          <div>
            <h2>请选择：</h2>
          </div>
          <el-table border :data="commoditylist">
            <el-table-column
              prop="Id"
              label="商品Id"
              width="70px"
            ></el-table-column>
            <el-table-column prop="Picture" label="商品图片">
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="imgStr(scope.row.Picture)"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="isActived" label="是否推荐" width="70px">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isActived"
                  @change="Statechanged(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="17">
          <div>
            <h2>已推荐：</h2>
          </div>
          <el-table border :data="advertisinglist">
            <el-table-column prop="Id" label="商品id" width="70px">
            </el-table-column>
            <el-table-column
              prop="CommodityName"
              label="商品名称"
              width="200px"
            >
            </el-table-column>
            <el-table-column prop="MerchantId" label="所属店铺">
            </el-table-column>
            <el-table-column
              prop="CommodityMoney"
              label="价格(元)"
              width="100px"
            >
            </el-table-column>
            <el-table-column prop="Picture" label="商品图片" width="150px">
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="imgStr(scope.row.Picture)"
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="isActived" label="关闭推荐" width="70px">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isActived"
                  @change="Statechanged(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 店铺选择器数据源绑定
      options: [{
        value: '选项1',
        label: '小米旗舰店'
      }, {
        value: '选项2',
        label: '良品铺子旗舰店'
      }, {
        value: '选项3',
        label: '百草味旗舰店'
      }, {
        value: '选项4',
        label: '十月稻田专卖店'
      }, {
        value: '选项5',
        label: '御泥坊旗舰店'
      }],
      // 店铺选择器选中数据
      shopvalue: '',
      // 商品选择器数据源绑定
      comoptions: [{
        value: '选项1',
        label: '朕的心意故宫食品 中秋月饼礼盒 八角盒悦棠 400g'
      }, {
        value: '选项2',
        label: ' 元气能量太空杯-青春白1.9L水杯大容量 每日喝水计划目标提醒运动水杯网红水壶吸管直饮手提便携'
      }, {
        value: '选项3',
        label: '圣牧 有机纯牛奶 品醇200ml*3盒尝鲜装 口感清甜 宝宝爱喝'
      }, {
        value: '选项4',
        label: '沃隆 每日坚果超级款175g/盒 含18%美国开心果仁进口原料原味扁桃仁腰果榛子仁混合坚果礼盒 休闲零食7天装'
      }, {
        value: '选项5',
        label: '魔香沐浴露男士古龙香水味久持留香专用沐浴乳液女洗发水套装 古龙香氛沐浴露800g'
      }],
      // 商品选择器选中值
      commodityvalue: '',
      // 第一个表格数据源
      commoditylist: [
        {
          Id: 1
        }
      ],
      // 第二个表格数据源
      advertisinglist: [
        {
          Id: 1,
          CommodityName: '魔香沐浴露男士古龙香水味久持留香专用沐浴乳液女洗发水套装 古龙香氛沐浴露',
          MerchantId: '欧耶化妆品专营店',
          CommodityMoney: '￥ 25.80 '
        }
      ]
    }
  },
  methods: {
    imgStr () {
    },
    // 监听 switch 开关状态变化的事件
    async Statechanged (row) {
      console.log(row)
    }
  }
}
</script>

<style scoped>
</style>
